<template>
    <div class="fillcontain">
        <Header/>

        <section class="data_section" style="padding: 20px;">
            <div class="search">
                <el-form :inline="true" :model="query" class="demo-form-inline">
                    <el-form-item label="年级">
                        <el-select v-model="query['grade.id']" placeholder="请选择" @change="getCourses">
                            <el-option v-for="item in grades" :key="item.id"
                                       :label="item.name" :value="item.id">
                            </el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="课程名称">
                        <el-input v-model="query.name" placeholder="名称" @keyup.enter.native="getCourses()"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getCourses()">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column type="index" width="100"></el-table-column>
                <el-table-column property="name" label="课程名称" width="170px"></el-table-column>
                <el-table-column property="grade.name" label="年级" width="150px"></el-table-column>
                <el-table-column property="desc" width="200px" label="课程简介"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleEditClick(scope.row)" type="text" size="small">编辑</el-button>
                        <!--            <el-button type="text" size="small">编辑</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-size="query.size"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>



        </section>
        <el-dialog title="修改课程信息" :visible.sync="dialogFormVisible">
            <div style="">
                <el-form :model="selectRow" :rules="rules">
                    <el-form-item label="用户名" prop="name" label-width="100px">
                        <el-input v-model="selectRow.name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="简介" label-width="100px">
                        <el-input type="textarea" v-model="selectRow.desc" ></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateCourse">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Header from '@/components/Header'
    import Footer from '@/components/Footer'
    import {getCourseCount, getCourseList, getGrades, isExistsCourseName, updateCourse} from "../api/getData";

    export default {
        name: "CourseList",
        components: {Header, Footer},
        data(){
            var validateCourseName = async (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('课程不能为空'));
                }
                console.log(this.findRowById(this.selectRow.id))
                var rawName = this.findRowById(this.selectRow.id).name;
                if(value == rawName){
                    return true;
                }
                // 校验该用户名是否存在
                const isExists = await isExistsCourseName({name:value});
                if(isExists.data.data == true){
                    return callback(new Error('课程已存在已存在'));
                }
            };
            return{
                grades:[{name:'',id:0}],
                count:0,
                query:{page:1,size:5, 'grade.id':0},
                tableData:[],
                selectRow:{},
                dialogFormVisible:false,
                rules:{name:{ validator: validateCourseName, trigger: 'blur' }}
            }
        },
        watch: {
            '$route':{
                handler(route){
                    const that = this;
                    if(route.name == 'courseList'){
                        that.getCourses();
                    }
                },
                deep:true
            }
        },
        created(){
            this.init();
            this.getCourses()
        },
        methods:{
            async init(){
                const grade = await getGrades();
                this.grades = grade.data.data;
                // console.log(this.grades)
            },
            async getCourses(){
                const countRes = await getCourseCount(this.query);
                if (countRes.data.code == 0) {
                    this.count = countRes.data.data;
                }

                const Courses = await getCourseList(this.query);
                this.tableData = [];
                if(Courses.data.data.content.length==0){
                    return;
                }
                Courses.data.data.content.forEach(item => {
                    const tableData = {};
                    tableData.id = item.id;
                    tableData.name = item.name;
                    tableData.grade = item.grade;
                    tableData.desc = item.desc;
                    this.tableData.push(tableData);
                });
                this.selectRow = this.tableData[0]
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.getCourses()
            },
            async handleEditClick(row){   // 编辑
                this.dialogFormVisible = true;
                this.selectRow = JSON.parse(JSON.stringify(row));// selectRow为备份
                this.selectRow.grade = null;
                console.log('edit row',this.selectRow)
            },
            async updateCourse(){  // 更新
                const Update = await updateCourse(this.selectRow);
                if(Update.data.code == 0){
                    var editRow = this.findRowById(this.selectRow.id);
                    editRow.name = this.selectRow.name;
                    editRow.desc = this.selectRow.desc;
                    this.$message('修改成功')
                    this.dialogFormVisible = false;
                }else{
                    this.$message.warning(Update.data.msg)
                }
            },
            findRowById(id){
                for(let v of this.tableData){
                    if(v.id == id){
                        return v;
                    }
                }
            }
        }
    }
</script>

<style scoped lang="less">
.dialog-footer{
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
